/* 自定义主页渐变背景 - 浅色主题 */
.VPHome .VPHero {
  background: linear-gradient(
    135deg,
    #e6e6f6 0%,
    #d6bfe2 40%,
    #ff9ae7 50%,
    #f68adc 60%,
    #f7a0e3 70%,
    #c7a2dc 80%,
    #e4bef9 100%
  );
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}

.VPHome .VPHero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.9) 0%,
    rgba(118, 75, 162, 0.9) 25%,
    rgba(255, 94, 77, 0.8) 50%,
    rgba(255, 154, 0, 0.8) 75%,
    rgba(245, 166, 35, 0.9) 100%
  );
  z-index: -1;
}

/* 暗黑主题适配 */
.dark .VPHome .VPHero {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.dark .VPHome .VPHero::before {
  background: linear-gradient(
    135deg,
    rgba(26, 35, 126, 0.9) 0%,
    rgba(45, 55, 72, 0.9) 25%,
    rgba(74, 85, 104, 0.8) 50%,
    rgba(113, 128, 150, 0.8) 75%,
    rgba(160, 174, 192, 0.9) 100%
  );
}

/* 确保文字颜色在不同背景上清晰可见 */
.VPHome .VPHero .main .name,
.VPHome .VPHero .main .text,
.VPHome .VPHero .main .tagline {
  color: white !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* 暗黑主题下的文字阴影调整 */
.dark .VPHome .VPHero .main .name,
.dark .VPHome .VPHero .main .text,
.dark .VPHome .VPHero .main .tagline {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* 美化按钮样式 - 浅色主题 */
.VPHome .VPHero .actions .VPButton.brand {
  background: rgba(245, 211, 211, 0.2);
  border: 2px solid rgba(5, 0, 0, 0.3);
  color: rgb(16, 16, 16);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.VPHome .VPHero .actions .VPButton.brand:hover {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* 暗黑主题下的按钮样式 */
.dark .VPHome .VPHero .actions .VPButton.brand {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(10px);
}

.dark .VPHome .VPHero .actions .VPButton.brand:hover {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* 添加动画效果 */
.VPHome .VPHero .main {
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Features 区域的暗黑主题适配 */
.dark .VPFeatures .VPFeature {
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-border);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .VPHome .VPHero {
    padding: 64px 24px;
  }
}

/* 平滑的主题切换过渡 */
.VPHome .VPHero,
.VPHome .VPHero::before,
.VPHome .VPHero .actions .VPButton.brand {
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
